
let form = layui.form

let layer = layui.layer
// ·······································显示页面··········································
function fn() {
    $.ajax({
        url: '/admin/links',
        type: 'GET',
        success: function (res) {
            let str = ''
            // alert(res.data)
            res.data.forEach(item => {

                str += `
        <tr>
        <td>${item.id}</td>
        <td>
          <div class="bg">
            <img src="http://localhost:8888/uploads/${item.linkicon}">
          </div>
        </td>
        <td>${item.linkname}</td>
        <td>${item.linkurl}</td>
        <td>${item.linkdesc}</td>
        <td>
          <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs edit">
            编辑
          </button>
          <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">
            删除
          </button>
        </td>
      </tr>
          
          `
            });

            $('tbody').html(str)

        },
        headers: {
            "Authorization": 'token'
        }

    })
}
fn()


// ·······································添加页面··········································
let edit_str = `

    <div class="layui-layer-title" style="cursor: move;">添加友情链接</div><div id="" class="layui-layer-content" style="height: 307px;">
    <form id="add-form" class="layui-form"  style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required="" lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required="" lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required="" lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon"></i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <span class="layui-layer-setwin">
  <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
  </span>
  <span class="layui-layer-resize"></span>
    `



// < div class="layui-layer layui-layer-page" id = "layui-layer1" type = "page" times = "1" showtime = "0" contype = "string" style = "z-index: 19891015; width: 500px; height: 350px; top: 62px; left: 701.5px;" >
$('#add-link').on('click', function () {

    let index = layer.open({
        type: 1,
        content: edit_str1,
        title: '添加类别',
        area: ['500px', '370px'],
    });

    $('#urlIcon').click(function () {
        $('#linkFile').click()
    })

    $('#linkFile').change(function (e) {
        // 获取到文件的路径
        const objectURL = URL.createObjectURL(e.target.files[0])

        // 设置图片显示路径
        $('#preIcon').attr('src', objectURL)

    })


    $('#add-form').on('submit', function (e) {
        // 阻止默认行为
        e.preventDefault()
        // 获取数据
        let data = new FormData(this)

        $.ajax({
            url: '/admin/links',
            type: 'post',
            data: data,
            processData: false,
            contentType: false,
            success: function (res) {
                layer.msg(res.message)
                if (res.status == 0) {
                    layer.close(index)
                    fn()
                }
            }
        })
    })


})


// ·······································删除页面··········································


$('tbody').on('click', '.delete', function () {

    let id = $(this).attr('data-id')
    // console.log(id)


    layer.confirm('您确定要删除吗', function (index) {

        $.ajax({

            url: '/admin/links/' + id,

            type: 'DELETE',
            success: function (res) {

                if (res.status == 0) {

                    layer.msg(res.message)
                    fn()
                }

            }

        })

        layer.close(index);
    });




})



// ·······································编辑页面··········································
let edit_str1 = `

    <div class="layui-layer-title" style="cursor: move;">添加友情链接</div><div id="" class="layui-layer-content" style="height: 307px;">
    <form id="edit-form" class="layui-form" lay-filter='editForm' style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required="" lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required="" lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required="" lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon"></i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <span class="layui-layer-setwin">
  <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
  </span>
  <span class="layui-layer-resize"></span>
    `

$('tbody').on('click', '.edit', function () {


    let id = $(this).attr('data-id')

    $.ajax({
        url: '/admin/links/' + id,
        type: 'get',
        success: function (res) {

            if (res.status == 0) {
                // 创建弹出层
                let index = layer.open({
                    type: 1,
                    content: edit_str1,
                    title: '添加类别',
                    area: ['500px', '370px'],
                });

                //     // 设置预览图片效果
                $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)



                let file = null
                $('#linkFile').change(function (e) {
                    const objectURL = URL.createObjectURL(e.target.files[0])
                    file = e.target.files[0]
                    $('#preIcon').attr('src', objectURL)
                })
                // 好看的按钮代替 原生按钮
                $('#urlIcon').click(function () {
                    $('#linkFile').click()
                })

                $('#linkFile').change(function (e) {
                    // 获取到文件的路径
                    const objectURL = URL.createObjectURL(e.target.files[0])

                    // 设置图片显示路径
                    $('#preIcon').attr('src', objectURL)

                })


                // 删除 linkicon 字段
                delete res.data.linkicon
                //     // 数据回填
                form.val('editForm', res.data)

                $('#edit-form').on('submit', function (e) {

                    // 阻止默认行为
                    e.preventDefault()
                    // 获取数据
                    let data = new FormData(this)


                    // 有新图片数据就添加进去
                    if (file) {
                        // 手动添加图片数据
                        data.append('linkicon', file)
                    }


                    $.ajax({
                        url: '/admin/links/' + id,
                        type: 'PUT',
                        data: data,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            // alert(123)
                            layer.msg(res.message)
                            if (res.status == 0) {
                                layer.close(index)
                                fn()
                            }
                        }
                    })

                })



            }
        }

    })
})
